<!--
 * @Author: Neko
 * @Date: 2021-04-09 10:21:33
 * @LastEditTime: 2021-06-02 16:39:01
 * @LastEditors: Neko
-->
<template>
	<contents
		:heightInclude="['navBar', 'tabBar']"
		class="product_details_page"
		@retry="getData()"
	>
		<GoodsNavbar v-model="goodsInfo" :routerParams="routerParams" @share="showPoster" />
		<GoodsSwiper v-model="goodsInfo.goodsPictureList" />
		<GoodsInfo v-model="goodsInfo" />
		<SubmitOrder v-model="goodsInfo" :is-open-format="isOpenFormat" :routerParams="routerParams" />
		<!-- <u-mask :show="show" @click="showPoster">
			<view class="poster_warp"><Painter isRenderImage @success="getPosterImg" :board="base" /></view>
		</u-mask> -->
	</contents>
</template>

<script>
import { goodsDetailBy, getGoodsSeoConfigAction } from '@/api/http/order'
import GoodsSwiper from '@/components/goodsSwiper'
import GoodsNavbar from '@/components/goodsNavbar'
import GoodsInfo from '@/components/goodsInfo'
import SubmitOrder from '@/components/submitOrder'
// import Painter from '@/components/lime-painter'
import { goodsDetails } from '@/util/posterModules'
export default {
	components: {
		GoodsSwiper,
		GoodsNavbar,
		GoodsInfo,
		SubmitOrder,
		// Painter
	},
	data() {
		return {
			routerParams: {},
			goodsInfo: {
				attributeAddDTO: {
					requiredGoodsBaseAttributeList: [],
					requiredGoodsSupplementAttributeList: []
				},
				goodsDetailPicList: []
			},

			show: false,
			base: {},

			seoData: {},
			seoElements: [],
			documentTitle: ''
		}
	},

	computed: {
		isOpenFormat() {
			return +this.routerParams.isOpenFormat
		}
	},

	onLoad(opt) {
		this.routerParams = opt
		this.getData()
	},
	onShow() {
		if (this.$store.getters.loginBack) {
			this.getData()
			this.$store.commit('SET_LOGIN_BACK', false)
		}
	},
	onUnload() {
		// #ifdef H5
		document.title = this.documentTitle
		this.seoElements.forEach(current => {
			const parent = current.parentNode
			parent.removeChild(current)
		})
		// #endif
	},

	methods: {
		async getGoodsSeoConfigAction() {
			try {
				const res = await getGoodsSeoConfigAction({
					id: this.routerParams.id
				})

				if (res.code === 200) {
					if (!res.data) return
					
					this.seoData = res.data

					this.setSeoData()
				} else {
					return uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			} catch (e) {
				throw Error(e)
			}
		},

		setSeoData() {
			this.seoElements = []

			document.title = this.seoData.title
			const description = this.createElement('meta', {
				name: 'description',
				content: this.seoData.description
			})

			const keywords = this.createElement('meta', {
				name: 'keywords',
				content: this.seoData.keyWords
			})

			const verification = this.createElement('meta', {
				name: 'google-site-verification',
				content: this.seoData.verificationFile
			})

			const metas = [description, keywords, verification]
			
			metas.forEach(current => {
				document.head.appendChild(current)
			})

			const ga = this.createElement('iframe', {
				src: 'https://www.googletagmanager.com/ns.html?id=' + this.seoData.gaCode,
				width: 0,
				height: 0,
				style: 'display: none; visibility: hidden'
			})

			document.body.appendChild(ga)

			this.seoElements.concat([...metas, ga])
		},

		createElement(tagName, attrs) {
			const element = document.createElement(tagName)

			const entries = Object.entries(attrs)

			entries.forEach(([key, value]) => {
				element[key] = value
			})

			return element
		},

		getData() {
			goodsDetailBy({
				id: this.routerParams.id || ''
			}).then(res => {
				if (res.code === 200) {
					this.goodsInfo = res.data

					// #ifdef APP-PLUS
					uni.setNavigationBarTitle({
						title: res.data.goodsName
					})
					// #endif

					// #ifdef H5
					this.documentTitle = document.title
					document.title = res.data.goodsName
					this.getGoodsSeoConfigAction()
					// #endif
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				}
			})
		},

		navSwitch(url) {
			uni.navigateTo({
				url
			})
		},
		showPoster() {
			if (!this.show) {
				const { commonName, goodsPicUrl, manufacturer, buyPriceDesc } = this.goodsInfo
				this.base = goodsDetails(commonName, goodsPicUrl, manufacturer, buyPriceDesc)
			}
			this.show = !this.show
		},
		getPosterImg(img) {
			console.log(img)
		}
	}
}
</script>

<style lang="scss" scoped>
.product_details_page {
}
</style>
